import React, { Component } from "react"
import { Outlet, NavLink } from "react-router-dom"
import "./index.css"

export default class Home extends Component {
  render() {
    return (
      <div>
        <h2>Home组件内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <NavLink
                to="/home/news"
                style={({ isActive }) => {
                  return isActive ? { backgroundColor: "yellow" } : {}
                }}
              >
                News
              </NavLink>
            </li>
            <li>
              <NavLink
                to="/home/message"
                className={({ isActive }) => {
                  return isActive ? "select" : ""
                }}
              >
                Message
              </NavLink>
            </li>
          </ul>
          <div>
            <div>
              <Outlet></Outlet>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
